.father{
    margin: 300px 0 0 300px;
    width: 100px;
    height: 100px;
    position: relative;
    // perspective: 500px;
    transform-style: preserve-3d;
    transform-origin:50px 50px 50px;

    @keyframes move {
        from{
            transform: rotate(0,0);
        }
        to{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }

    animation: move 8s ease-in infinite;
    div{
        width: 100px;
        height: 100px;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 100px;
        opacity: 0.5;

        &:nth-of-type(1){
            background-color: yellow;
        }
        &:nth-of-type(2){
            background-color: greenyellow;
            transform-origin: top;
            transform: rotateX(90deg);
        }
        &:nth-of-type(3){
            background-color:pink;
            transform-origin: left;
            transform: rotateY(-90deg);
        }
        &:nth-of-type(4){
            background-color: skyblue;
            transform-origin: bottom;
            transform: rotateX(-90deg);
        }
        &:nth-of-type(5){
            background-color: orange;
            transform-origin: right;
            transform: rotateY(90deg);
        }
        &:nth-of-type(6){
            background-color: purple;
            transform: translateZ(100px);
        }
    }
}